<template>
	<view class="gt-admin-list">
		<gt-form v-if="template.search" :template="template.search" :selectList="template.selectList"
			@submit="searchFormSubmit"></gt-form>
		<view class="gt-table-list-container">
			<view class="row mb-10" v-if="template.buttonGroup" :class="template.buttonGroup.class || ''">

				<!-- 按钮组 -->
				<view v-for="(item,index) in template.buttonGroup.child" :key="index"
					:style="template.buttonGroup.style || ''">
					<view v-if="item.type == 'popup'" :class="item.class || ''" :style="item.style"
						@click="buttonGroup(item)">{{item.label}}</view>
					<view v-else-if="item.type == 'batch'  && batchSelectIndexList.length > 0 "
						:class="item.class || ''" :style="item.style || ''" @click="batch(item)">{{item.label}}</view>
					<view v-else class="btn btn-disabled  mr-15" :class="item.class || ''">{{item.label}}</view>
				</view>
				<view class="row-auto"></view>
				<!-- 分页信息 -->
				<view v-if="template.pageInfo" class="row">
					<uni-pagination prevText="上一页" nextText="下一页" :total="template.pageInfo.totalCount"
						:pageSize="template.pageInfo.limit" :current="template.pageInfo.page"
						@change="pagination">
					</uni-pagination>
					<gt-select class="gt-form-border gt-form-sm page-limit ml-15" :list="pageLimitList"
						placeholder="10条" @change="changePageLimit">
					</gt-select>
					<input class="input-line input-page ml-15 mr-15" type="number" v-model="searchPage" />
					<button class="btn btn-sm " @click="skipPage()"
						:disabled="searchPage == '' || searchPage ==  template.pageInfo.page || searchPage > template.pageInfo.totalPage">跳转</button>
				</view>
			</view>
			
			<gt-admin-tab v-if="template.tab" :list="template.tab"></gt-admin-tab>
			<view class="row" v-if="template.table">
				<view class="row-auto">
					<view style="border: 1px solid #eeeeee;border-radius: 5px;">
						<table class="gt-table" align="center">
							<thead>
								<tr>
									<td v-if="template.batch" width="50">
										<checkbox :checked="selectAllCheckbox" @click="selectParentCheckBox"></checkbox>
									</td>
									<td v-for="(column,key) in template.table.columns" :key="key">{{column.label}}</td>
								</tr>
							</thead>
							<tbody v-if="!template || !template.list || template.list.length ==0 ">
								<tr class="gt-table-tr">
									<td :colspan="template.table.columns && template.table.columns.length + 1">
										<view class="t-center c-secondary pd-15">
											无数据
										</view>
									</td>
								</tr>
							</tbody>
							<tbody v-else v-for="(row,rowIndex) in template.list" :key="rowIndex">
								<tr class="gt-table-tr">
									<td v-if="template.batch">
										<checkbox
											:checked="batchSelectIndexList && batchSelectIndexList.indexOf(rowIndex)==-1 ? false : true "
											@click="selectCheckBox(rowIndex)"></checkbox>
									</td>
									<td v-for="(column,columnIndex) in template.table.columns" :key="columnIndex">
										<slot :name="column.field" :data="{row,column,rowIndex,columnIndex}">
											<!-- 插槽 -->
											<view v-if="column.type == 'custom'">
												<slot name="tableColumn" :row="row" :column="column"
													:rowIndex="rowIndex"></slot>
											</view>
											<!-- 时间 -->
											<view v-else-if="column.type == 'handle'">
												<view v-for="(item,index) in column.child" :key="index"
													:style="column.style || ''">
													<view v-if="item.type == 'popup'" :class="item.class"
														:style="item.style" @click="buttonGroup(item,row)">
														{{item.label}}
													</view>
													<gt-btn
														v-else-if="item.type == 'batch'  && batchSelectIndexList.length > 0 "
														:class="item.class" :style="item.style"
														@callBack="batchCallBack"
														:postUrl="item.url+'?ids=' + template.table.ids "
														:name="item.label">
													</gt-btn>
													<view v-else class="btn btn-disabled  mr-15">{{item.label}}</view>
												</view>
											</view>
											<!-- 时间 -->
											<view v-else-if="column.format == 'date'">
												{{ $tools.timeToDate(row[column.field],'Y-M-D ')  }}
											</view>
											<view v-else-if="column.format == 'datetime'">
												{{ $tools.timeToDate(row[column.field],'Y-M-D h:m:s')  }}
											</view>
											<!-- 图片 -->
											<view v-else-if="column.format == 'img' && row[column.field] != ''"
												class="row pointer"
												@click="$fun.showImgs(row[column.field].split(','))">
												<image :class="column.size?column.size:'w-h-30'" class=" border-radius"
													:src="row[column.field]"></image>
											</view>
											<!-- 匹配 -->
											<view
												v-else-if="column.format == 'select' && template.selectList && template.selectList[column.field]">
												{{ $tools.getListVal(template.selectList[column.field],row[column.field])}}
											</view>
											<!-- 复制文字 -->
											<view v-else-if="column.format == 'copy_text'">
												<text class="pointer" @click="$tools.copy(row[column.field])">
													<text class="mr-5">{{row[column.field]}}</text>
													<text class="iconfont icon-copy"></text>
												</text>
											</view>
											<!-- 按钮 -->
											<view v-else-if="column.format == 'btn'">
												<view class="row" v-for="(btnItems,btnKey) in column.btnList"
													:key="btnKey" v-if=" template.table.status == btnItems.status">
													<view v-for="(btn,btnIndex) in btnItems.list" :key="btnIndex">
														<gt-btn v-if="btn.url" :name="btn.name"
															:iconClass="btn.iconClass" :class="btn.class"
															:postUrl="btn.url(row)" :confirmText="'您确认此操作？'"
															@callBack="rowCallBack">
														</gt-btn>
														<view v-else @click="update(btn.label,row)">
															<gt-btn :name="btn.name" :iconClass="btn.iconClass"
																:class="btn.class">
															</gt-btn>
														</view>
													</view>
												</view>
											</view>
											<!-- 自定义Value -->
											<view v-else-if="column.value">
												{{column.value(row[column.field],rowIndex,row)}}
											</view>
											<!-- 文字 -->
											<view v-else>
												<text class="pointer" @click="$tools.copy(row[column.field])">
													<text class="mr-5">{{row[column.field]}}</text>
												</text>
											</view>
										</slot>
									</td>
								</tr>
								<slot name="tableChild" :row="row" :rowIndex="rowIndex"></slot>
							</tbody>
						</table>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" :type="formTemplate.type || 'right'">
			<view style="background-color: #fff;overflow-y: auto;position: relative;"
				:style="!formTemplate.type || formTemplate.type == 'right' ? 'height: calc( 100vh - 50px );' : 'max-height: calc( 80vh - 50px );border-radius:5px;'">
				<view class="gt-popup-close" @click="closePopup">
					<uni-icons type="closeempty" class="gt-popup-close-icon"
						style="line-height: 24px;font-size: 22px;color:#999999;"></uni-icons>
				</view>
				<view class="popup-title">{{formTemplate.title}}</view>
				<view class="pd-30" style="position:  relative;">
					<gt-form :template="formTemplate.form" :formData="formData" :selectList="template.selectList"
						@submit="formSubmit">
					</gt-form>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="view" :type="formTemplate.type || 'right'">
			<view style="background-color: #fff;overflow-y: auto;position: relative;"
				:style="!formTemplate.type || formTemplate.type == 'right' ? 'height: calc( 100vh - 50px );' : 'max-height: calc( 80vh - 50px );border-radius:5px;'">
				<view class="gt-popup-close" @click="closePopup">
					<uni-icons type="closeempty" class="gt-popup-close-icon"
						style="line-height: 24px;font-size: 22px;color:#999999;"></uni-icons>
				</view>
				<view class="popup-title">{{formTemplate.title}}</view>
				<view class="pd-30" style="position:  relative;">
					
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "gt-table-list",
		model: {
			prop: 'template',
			event: 'change'
		},
		props: {
			template: {}
		},
		data() {
			return {
				searchForm: {},
				batchSelectIndexList: [],
				pageLimitList: [{
						key: 20,
						val: '20条'
					},
					{
						key: 30,
						val: '30条'
					},
					{
						key: 50,
						val: '50条'
					},
					{
						key: 100,
						val: '100条'
					},
				],
				searchPage: '',
				formTemplate: '',
				formData: {},
			}
		},
		created() {
			//获取选择列表
			this.getSelectListData();
			//获取数据列表
			this.getListData();
		},
		computed: {
			selectAllCheckbox() {
				if (this.template.table.list && this.template.table.list.length != 0 && this.batchSelectIndexList && this
					.batchSelectIndexList.length > 0 && this
					.batchSelectIndexList
					.length == this.template.table.list.length) {
					return true;
				}
				return false;
			}
		},
		watch: {
			template(newData) {
				// console.log(newData);
			}
		},
		methods: {
			formSubmit(e) {
				if (e.response && e.response.msg) {
					this.getListData();
					this.$refs.popup.close();
				}
			},
			buttonGroup(item, data) {
				if (item.click) {
					let pages = getCurrentPages();
					let page = pages[pages.length - 1];
					item.click(item, data, page);
				}else if (item.popup) {
					if (item.popup.form) {
						if (typeof item.popup.form == 'string' && this.template.form[item.popup.form]) {
							item.popup.form = this.template.form[item.popup.form];
						}
						if (item.url) {
							item.popup.form.url = item.url;
						}
						if (!item.popup.form.url) {
							console.log('请求地址为空！');
							return;
						}
						if (data) {
							let formData = {};
							for (let i in item.popup.form.child) {
								let row = item.popup.form.child[i]
								if(row.field && data[row.field] && row.type == 'json' && row.child){
									formData[row.field] = JSON.parse(data[row.field]);
									console.log(formData[row.field]);
								}if(row.field && data[row.field] && row.type == 'json_array' && row.child){
									formData[row.field] = JSON.parse(data[row.field]);
									console.log(formData[row.field]);
								}else if (row.field && data[row.field]) {
									formData[row.field] = data[row.field];
								} else {
									formData[row.field] = '';
								}
							}
							let urlParams = '';
							if (item.urlParams) {
								for (let i in item.urlParams) {
									let field = item.urlParams[i];
									if (!data[field]) {
										console.log('请求参数值不存在');
										return;
									} else {
										urlParams += urlParams ? '&' : '';
										urlParams += field + '=' + data[field];
									}
								}
							}
							item.popup.form.url += urlParams ? '?' + urlParams : '';
							this.formTemplate = item.popup;
							this.formData = formData;
						} else {
							let formData = {};
							for (let i in item.popup.form.child) {
								let row = item.popup.form.child[i]
								if(row.field && row.type == 'json'){
									let tempJson = {};
									for(let i in row.child){
										if(row.child[i].field){
											tempJson[row.child[i].field] = '';
										}
										
									}
									formData[row.field] = tempJson;
								}else if(row.field && row.type == 'json_array'){
									let tempJson = {};
									let tempJsonArr = [];
									for(let i in row.child){
										if(row.child[i].field){
											tempJson[row.child[i].field] = '';
										}
									}
									tempJsonArr.push(tempJson);
									// console.log(tempJsonArr);
									formData[row.field] = tempJsonArr;
								}else if(row.field){
									formData[row.field] = '';
								}
							}
							this.formTemplate = item.popup;
							this.formData = formData;

						}
						// console.log(this.formData);
						this.$refs.popup.open();
					}

				}
			},
			closePopup() {
				this.$refs.popup.close();
			},
			searchFormSubmit(e) {
				console.log(e);
				this.searchForm = e.data;
				this.getListData({
					page: 1
				});
			},
			//获取选择列表
			getSelectListData() {
				let _this = this;
				if (this.template.selectListUrl) {
					for (let i in this.template.selectListUrl) {
						this.$get({
							url: this.template.selectListUrl[i],
							afterFun(resp) {
								if (resp) {
									let template = _this.$tools.assginData(_this.template);
									if (!template.selectList) {
										template.selectList = {};
									}
									template.selectList[i] = resp;
									_this.$emit('change', template)
								}
							},
						});
					}
				}
			},
			//获取数据列表
			getListData(params) {
				let _this = this;
				// console.log('getListData');
				let page = params && params.page || (this.template.pageInfo.page ? this.template.pageInfo.page :
					1);
				let limit = params && params.limit || (this.template.pageInfo.limit || 10);
				this.$get({
					url: _this.template.table.listUrl,
					data: {
						page: page,
						limit: limit,
						...this.searchForm
					},
					afterFun(resp) {
						let template = _this.$tools.assginData(_this.template);
						if (resp.list) {
							template.list = resp.list
						}
						if (resp.pageInfo) {
							template.pageInfo = resp.pageInfo;
						}
						_this.$emit('change', template)
						return resp.list;
					},
				});
			},
			selectCheckBox(index) {
				let key = this.batchSelectIndexList.indexOf(index);
				if (key == -1) {
					this.batchSelectIndexList.push(index);
				} else {
					this.batchSelectIndexList.splice(key, 1);
				}
				this.$emit('changeSelection', this.batchSelectIndexList)
			},
			selectParentCheckBox() {
				let template = this.template;
				if (template.list.length != 0 && this.batchSelectIndexList.length == template.list.length) {
					//取消
					this.batchSelectIndexList = [];
				} else {
					//选中
					let list = [];
					for (let i in template.list) {
						list.push(parseInt(i));
					}
					this.batchSelectIndexList = [];
					this.batchSelectIndexList = list;
				}
				this.$emit('changeSelection', this.batchSelectIndexList)
			},
			//分页条数
			changePageLimit(e) {
				this.getListData({
					page: 1,
					limit: e || 10
				});
			},
			//分页页数
			pagination(e) {
				this.getListData({
					page: e.current
				});
			},
			//分页跳转
			skipPage() {
				this.getListData({
					page: parseInt(this.searchPage)
				});
				this.searchPage = '';
			},
			batch(item) {
				// console.log(item);
				// console.log(this.batchSelectIndexList);
				let _this = this;
				// for(let i in this.template.list){
				if (!item.url) {
					console.log('无 url 参数');
					return;
				}
				if (!item.field) {
					console.log('无 field 参数');
					return;
				}
				let params = '';
				for (let i in this.batchSelectIndexList) {
					let index = this.batchSelectIndexList[i];
					let row = this.template.list[index];
					if (row[item.field]) {
						params += params ? ',' : '';
						params += row[item.field];
					}
				}
				uni.showModal({
					title: '警告',
					content: this.confirmText,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_this.$post({
								url: item.url + '?' + item.field + '=' + params,
								afterFun(r) {
									if (r.msg) {
										_this.batchSelectIndexList = [];
										_this.getListData();
									}
									_this.$emit('batchCallBack', {
										response: r
									})
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			rowCallBack(e) {
				if (e.msg) {
					this.batchSelectIndexList = []
					this.$emit('rowCallBack')
				}
			},
			update(label, row) {
				let obj = {
					label: label,
					row: row
				}
				this.$emit('update', obj)
			}
		}
	}
</script>

<style>
	.gt-popup-close {
		width: 24px;
		height: 24px;
		position: absolute;
		right: 15px;
		top: 15px;
		text-align: center;
		cursor: pointer;
	}


	.popup-title {
		line-height: 40px;
		font-size: 22px;
		padding: 10px 20px;
		border-bottom: 1px solid #eeeeee;
	}

	.gt-table-list-container {
		padding: 0 30px 30px 30px;
	}

	.gt-table {
		width: 100%;
		max-width: 100%;
		background-color: #fff;
		font-size: 14px;
		color: #606266;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		border-collapse: collapse;
		border-spacing: 16px;
		color: #606266;
		text-align: left;
	}

	/* 线状网格 */
	.gt-table-line td {
		// border-top: none !important;
		// border-right: none !important;
		// border-left: none !important;
	}

	.gt-table thead {
		font-weight: 900;
		color: #858585;
	}

	.gt-table-tr:hover {
		background-color: #f9f9f9;
	}

	.gt-table tr {
		display: table-row;
		vertical-align: inherit;
		border-color: inherit;
	}

	.gt-table td {
		padding: 12px 15px;
	}

	.gt-table tbody td {
		border-top: 1px solid #eeeeee;
	}

	.showTrChild,
	.showTrChild td,
	.showTrChild .td-content {
		min-height: 50px;
		animation: showTr .3s;
	}

	@keyframes showTr {
		form: {
			height: 0 !important;
			padding: 0 !important;
			overflow: hidden !important;
			border-top: none !important;
		}

		to: {
			min-height: 50px;
			background-color: aqua;
		}
	}

	.hideTrChild,
	.hideTrChild td,
	.hideTrChild .td-content {
		height: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
		border-top: none !important;
		animation: hideTr .3s;
	}

	@keyframes hideTr {
		form: {
			min-height: 100px;
		}

		to: {
			height: 0 !important;
			padding: 0 !important;
			overflow: hidden !important;
			border-top: none !important;
		}
	}

	button {
		border: none;
	}

	.page--active {
		background-color: black;
	}

	.page-limit {
		width: 80px;
		height: 28px;
	}
</style>
